<template>
	<div>
		<h1>{{msg}}</h1>
		<!-- 第一个div，练习动态绑定class样式，字符串写法 -->
		<h4>练习：动态绑定class样式，字符串写法</h4>
		<div class="basic" :class="str" >
			1227就业顺利
			<button @click="changeMood">点我随机切换心情</button>
		</div>

		<hr>

		<!-- 第二个div，练习动态绑定class样式，对象写法 -->
		<h4>练习：动态绑定class样式，对象写法</h4>
		<div class="basic" :class="obj" >
			1227就业顺利
			<button @click="obj.atguigu1 = !obj.atguigu1">应用/取消 atguigu1</button>
			<button @click="obj.atguigu2 = !obj.atguigu2">应用/取消 atguigu2</button>
			<button @click="obj.atguigu3 = !obj.atguigu3">应用/取消 atguigu3</button>
		</div>

		<hr>

		<!-- 第三个div，练习动态绑定class样式，数组写法 -->
		<h4>练习：动态绑定class样式，数组写法</h4>
		<div class="basic" :class="arr" >
			1227就业顺利
			<input type="text" placeholder="输入一个样式名去应用" @keyup.enter="add">
		</div>


	</div>
</template>

<script>
	export default {
		name:'App',
		data() {
			return {
				msg:'欢迎来到尚硅谷学习！',
				str:'happy',
				obj:{
					atguigu1:true,
					atguigu2:true,
					atguigu3:true
				},
				arr:[]
			}
		},
		methods:{
			changeMood(){
				let moodArr = ['happy','normal','sad']
				let index = Math.floor(Math.random()*3)
				console.log(index)
				this.str = moodArr[index]
			},
			add(e){
				//获取用户的输入
				let {value} = e.target
				this.arr.push(value.trim())
			}
		}
	}
</script>

<style>
	.basic{
		width: 400px;
		height: 100px;
		border: 1px solid black;
	}

	/* 三种心情，三选一 */
	.happy{
		border: 4px solid red;;
		background-color: rgba(255, 255, 0, 0.644);
		background: linear-gradient(30deg,yellow,pink,orange,yellow);
	}
	.sad{
		border: 4px dashed black;
		background-color: gray;
	}
	.normal{
		border: 4px solid deepskyblue;
		background-color: skyblue;
	}

	/* 三个样式，随意选择，可以同时存在 */
	.atguigu1{
		background-color: yellowgreen;
	}
	.atguigu2{
		font-size: 30px;
		text-shadow:2px 2px 10px red;
	}
	.atguigu3{
		border-radius: 20px;
	}
</style>
